import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
const pathSrc = path.resolve(__dirname, "src");

// 自动导入vue,组件等
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";

// element-plus 自动导入，依赖上面的自动导入
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import Icons from "unplugin-icons/vite";
import IconsResolver from "unplugin-icons/resolver";

// svg图标
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";

// unoscss
import UnoCSS from "unocss/vite";

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  /*
  1.解构出来三个参数
   command: 是build 还是serve主要取决于我们敲的命令是开启开发环境还是生产环境 (vite build就是build其他是serve)
   mode:环境，当前npm run xx --mode develoment,那么就是develoment
   ssrBuild:是否服务端渲染
  */
  // 当前env文件所在的目录
  // 第二个参数不是必须要使用process.cwd(),
  // 返回当前环境变量配置，有我们自定义的那些
  const env = loadEnv(mode, process.cwd());

  return {
    server: {
      // 允许IP访问
      host: "0.0.0.0",
      // 应用端口 (默认:3000)
      port: Number(env.VITE_APP_PORT),
      // 运行是否自动打开浏览器
      open: true,
      proxy: {
        /** 代理前缀为 /dev-api 的请求  */
        [env.VITE_APP_BASE_API]: {
          changeOrigin: true,
          // 接口地址
          target: env.VITE_APP_API_URL,
          rewrite: (path) =>
            path.replace(new RegExp("^" + env.VITE_APP_BASE_API), ""),
        },
      },
    },

    resolve: {
      alias: {
        "@": path.resolve(__dirname, "./src"),
      },
    },

    // 插件
    plugins: [
      AutoImport({
        // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
        imports: ["vue"],
        eslintrc: {
          enabled: false, // 是否自动生成 eslint 规则，建议生成之后设置 false ,配置true会目录下生成eslint规则文件，看到生成了就可以设置false了
          filepath: "./.eslintrc-auto-import.json", // 指定自动导入函数 eslint 规则的文件
        },
        dts: path.resolve(pathSrc, "types", "auto-imports.d.ts"), // 指定自动导入函数TS类型声明文件路径,配置了文件会自动生成,并且引用新组件会自动导入
        resolvers: [
          // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
          ElementPlusResolver(),
          // 自动导入图标组件
          IconsResolver({}),
        ],
        vueTemplate: true, // 是否在 vue 模板中自动导入
      }),

      Components({
        dts: path.resolve(pathSrc, "types", "components.d.ts"), // 指定自动导入组件TS类型声明文件路径，配置了文件会自动生成
        resolvers: [
          // 自动导入 Element Plus 组件
          ElementPlusResolver(),
          // 自动注册图标组件
          IconsResolver({
            enabledCollections: ["ep"], // element-plus图标库，其他图标库 https://icon-sets.iconify.design/
          }),
        ],
      }),

      Icons({
        // 自动安装图标库
        autoInstall: true,
      }),

      // svg
      createSvgIconsPlugin({
        // 指定需要缓存的图标文件夹
        iconDirs: [path.resolve(process.cwd(), "src/assets/icons")],
        // 指定symbolId格式
        symbolId: "icon-[dir]-[name]",
      }),

      UnoCSS(),

      vue(),
    ],


    css: {
      // CSS 预处理器
      preprocessorOptions: {
        //define global scss variable
        scss: {
          javascriptEnabled: true,
          // additionalData: `@use "@/styles/variables.scss" as *;`
          additionalData: `@import "./src/styles/variables.scss";`,
        },
      },
    },
  };
});
